.dashboard {
    // outline: 1px solid red;
}

.color {
    margin-bottom      : 2rem;
    width              : 100%;
    // max-width       : 15rem;
    height             : 8rem;
    // outline         : 1px dashed orange;
    background-color   : #fff;
    border-radius      : 8px;
    display            : flex;
    justify-content    : space-between;

    &-left {
        width                    : 40%;
        height                   : 100%;
        border-top-left-radius   : 8px;
        border-bottom-left-radius: 8px;
        display                  : flex;
        justify-content          : center;
        align-items              : center;
    }

    &-right {
        width          : 60%;
        height         : 100%;
        display        : flex;
        justify-content: center;
        align-items    : center;

        &-bg {
            text-align: center;

            &>div:nth-child(1) {
                font-size  : 2rem;
                font-weight: bold;
            }

            &>div:nth-child(2) {
                color: #999;
            }
        }
    }
}

.chart {
    background-color: #fff;
    border-radius   : 4px;
}